<template>
	<div class="quick_note" id="quick_note">
		<div class="st_t1">发表系统留言</div>
		<div class="note_list">
			<ul>
				<li class="imgList">
					<div class="note_left">留言图片：</div>
					<div class="note_right note_upload">
						<input type="file" class="upload" id="upload"  v-on:change="imgSrc" style="display: none;"/>
						<img :src="quickInfo.img"  v-on:click="changeClick()" />
					</div>
				</li>
				<li class="textList">
					<div class="note_left">留言内容：</div>
					<div class="note_right">
						<textarea v-model="quickInfo.word"></textarea>
					</div>
				</li>
				<li>
					<div class="note_left">选择商家：</div>
					<div class="note_right">
						<select v-model="quickInfo.brandId">
							<option value="">请选择商家</option>
							<option v-for="item in selectlist" v-bind:value="item.id">{{item.brandName}}</option>
						</select>
					</div>
				</li>
				<li class="saveWord">
					<button v-on:click="saveInfo">立即发表</button>
				</li>
			</ul>
		</div>
		<div class="system_note">
			<div class="st_t1">系统留言记录</div>
			<systemtable></systemtable>
		</div>
	</div>
</template>

<script>
	
	import systemtable from './pannel/system_table'
	export default {
		name: 'quick_note',
		computed: {
		},
		data() {
			return {
				title: '',
				selectlist:[],
				quickInfo:{
					word:'',
					img:'../../../static/imgs/upload.png',
					uuid:'',
					brandId:''
				}
			}
		}, //定义变量
		components: {
			systemtable
		}, //注册组件
		methods: { //方法都在这里
			changeClick:function(){
				this.trueClick()
			},
			trueClick:function(){
				$('#upload').click()
			},
			imgSrc:function(){
				var that=this
				var node=document.getElementById('upload')
				var imgURL = "";  
		        try{  
		            var file = null;  
		            if(node.files && node.files[0] ){  
		                file = node.files[0];  
		            }else if(node.files && node.files.item(0)) {  
		                file = node.files.item(0);  
		            }  
		            try{  
		                imgURL =  file.getAsDataURL();  
		            }catch(e){  
		               var imgRUL = window.URL.createObjectURL(file);  
		            }  
		        }catch(e){  
		            if (node.files && node.files[0]) {  
		                var reader = new FileReader();  
		                reader.onload = function (e) {  
		                    imgURL = e.target.result;  
		                };  
		                reader.readAsDataURL(node.files[0]);  
		            }  
		        }
//		        console.log(imgRUL)
		        var formData = new FormData();
				formData.append('file', $('#upload')[0].files[0]);
				$.ajax({
				    url: 'https://www.vaniswdq.com/springUpload',
				    type: 'POST',
				    cache: false,
				    data: formData,
				    processData: false,
				    contentType: false
				}).done(function(res) {
//					console.log(res)
					that.quickInfo.img=res
				}).fail(function(res) {});
			},
			saveInfo:function(){
				if(this.quickInfo.word==''){
					alert('请添加留言内容')
					return;
				}
				if(this.quickInfo.brandId==''){
					alert('请选择商家')
					return;
				}
				if(this.quickInfo.img=="../../../static/imgs/upload.png"){
					alert('请添加留言图片')
				}else{
					this.lh_http('post', "tbWords/create.do",this.quickInfo).done(function(res) {
						if(res.status) {
							alert('发表成功')
						} else {
							alert(res.data);
						}
					})
				}
				
			}
		},
		mounted() {
			var that = this;
			//获取banner
		},
		beforeCreate:function(){
			var storeId={
				brandId:0
			}
			var that = this;
			this.lh_http('post', "tbBrand/tbBrandJsonList",storeId).done(function(res) {
				if(res.status) {
//					console.log(res)
					that.selectlist=res.data.tbBrandList.resultList
				} else {
					alert(res.data);
				}
			})
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	.quick_note {
		text-align: left;
		.st_t1 {
			line-height: 40px;
			font-size:24px;
			font-weight: normal;
			background:#ECECEC;
			padding-left:20px;
		}
		.note_list{
			width:100%;
			padding-left:20px;
			margin-top:20px;
			ul{
				li{
					width:100%;
					height:40px;
					margin-bottom:20px;
					.note_left{
						float:left;
						line-height: 40px;
						width:100px;
					}				
					.note_right{
						float:left;
						input{
							width:313px;
							height:40px;
							border:#ccc solid 1px;
							padding-left:20px;
						}
						select{
							width:313px;
							height:40px;
							
						}
					}
					.note_upload{
						position: relative;
						.upload{
							width:150px;
							height:150px;
							position: absolute;
							top:0;
							left:0;
							
						}
					}	
				}
				.imgList{
					height:150px;
					.note_right{
						height:150px;
						img{
							width:150px;
							height:150px;
						}
					}
				}
				.textList{
					height:100px;
					.note_right{
						height:100px;
						textarea{
							width:313px;
							height:100px;
							resize: none;
							outline: none;
							padding:5px;
						}
					}
				}
				.saveWord{
					button{
						width:413px;
						height:40px;
						background:#007AFF;
						color:#fff;
						border-radius:4px;
					}
				}
			}
		}
		.system_note{
			margin-top:60px;
		}
	}
</style>